<template>
    <div class="editor">
      <div class="editor-wrap" :style="pageStyle">
        <Grid v-show="pageSetting.isGrid" />
        <Canvas />
      </div>
    </div>
</template>

<script >
import { mapState } from 'vuex'
import Grid from "./Grid"
import Canvas from "./Canvas/index.jsx"


export default {
  data() {
    return {

    }
  },
  computed: {
    ...mapState("lowCode", {
      pageStyle: state => {
        const {
          width,
          height
        } = state.pageSetting
        return {
          ...state.pageSetting,
          width: `${width}px`,
          height: `${height}px`,
          minWidth: `${width}px`,
          minHeight: `${height}px`
        }
      },
      pageSetting: state => state.pageSetting
    })
  },
  components: {
    Grid,
    Canvas,
  },
}
</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>
